<template>
  <div class="app-container">
    <FullCalendar ref="myCalendar" :options='calendarOptions'>
      <template v-slot:eventContent='arg'>
        <el-tooltip class="item" effect="dark" :content="arg.event.title" placement="top">
          <div style="width: 100%" :style="{backgroundColor: arg.event.backgroundColor}">
            <i style="width: 100%"  v-if="arg.event.title.length >= 18">{{ arg.event.title.substr(0, 18) + "..." }}</i>
            <i v-else>{{ arg.event.title }}</i>
          </div>
        </el-tooltip>
      </template>
    </FullCalendar>
    <formInfo v-if="open" :open="open" :ShowBtn="ShowBtn" :title="title" :formInfo="form" @close="cancel"></formInfo>
  </div>
</template>

<script>
import { listAllLdjl, getLdjl, delLdjl, addLdjl, updateLdjl } from "@/api/gd/ldjl";
import formInfo from '@/views/gd/ldjl/formInfo.vue'
import { parseTime } from '@/utils/ruoyi'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
import moment from 'moment'

export default {
  name: "Ldjl",
  components: {
    FullCalendar,
    formInfo
  },
  data() {
    return {
      // 遮罩层
      title: '',
      form: {},
      open: false,
      loading: true,
      ShowBtn: true,
      calendarOptions: {
        // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        buttonText: { today: '今天', month: '月', week: '周', day: '日' }, // 替换按钮文字
        allDayText: '全天', // 替换全天文本
        initialView: 'dayGridMonth', // 默认视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        // initialEvents: , // 或者，使用`events`设置从提要中获取
        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
        locale: 'zh-cn', // 切换语言，当前为中文
        eventColor: '#3BB2E3', // 全部日历日程背景色
        themeSystem: 'Mintv', // 主题色(本地测试未能生效)
        initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
        timeGridEventMinHeight: '20', // 设置事件的最小高度
        aspectRatio: 1.85, // 设置日历单元格宽度与高度的比例。
        displayEventTime: true, // event是否显示时间
        // allDaySlot: false, // 周，日视图时，all-day 不显示
        eventLimit: true, // //数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数
        moreLinkContent: '查看更多',
        headerToolbar: { // 日历头部按钮
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        slotLabelFormat: {
          hour: '2-digit',
          minute: '2-digit',
          meridiem: false,
          hour12: false // 设置时间为24小时
        },
        eventLimitNum: { // 事件显示数量限制(本地测试未能生效)
          dayGrid: {
            eventLimit: 5
          },
          timeGrid: {
            eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
          }
        },
        // 事件
        // eventClick: this.handleEventClick, // 点击日历日程事件
        eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
        eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
        eventDrop: this.eventDrop, // 拖动日历日程事件
        eventResize: this.eventResize, // 修改日历日程大小事件
        // select: this.handleDateSelect, // 选中日历格事件
        eventDidMount: this.eventDidMount, // 安装提示事件
        loading: this.loading, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
        // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
        eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
        allowContextMenu: false,
        editable: false, // 是否可以进行（拖动、缩放）修改
        eventStartEditable: false, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
        eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
        selectable: true, // 是否可以选中日历格
        selectMirror: true,
        selectMinDistance: 0, // 选中日历格的最小距离
        dayMaxEvents: true,
        weekends: true,
        navLinks: true, // 天链接
        selectHelper: false, // 接selectable，周/日视图在选择时是否预先画出“日程区块”的样式出来
        slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
        select: this.handleDateSelect, // 点击日历方法 新增
        eventClick: this.handleEventClick, // 点击事件方法 删除
        eventsSet: this.handleEvents, // 未知 方法
        minTime: '06:00', // 设置显示的时间从几点开始
        maxTime: '18:00', // 设置显示的时间从几点结束
        events: []
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zbbh: undefined,
        gsmc: undefined,
        ysjl: undefined,
        sjlr: undefined,
        yfStr: undefined,
        createId: undefined,
        createDept: undefined,
        createDeptName: undefined
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listAllLdjl(this.queryParams).then(response => {
        this.calendarOptions.events = response.map(({ id, zbbh, gsmc, rq }) => ({
          id: id,
          title: zbbh + "--" + gsmc,
          start: rq,
          end: rq,
          // backgroundColor: this.getBackColor(jcfs, sfyxc, sjzt)
          backgroundColor: '#409EFF'
        }))
        this.loading = false;
      });
    },
    cancel() {
      this.open = false;
      this.form = {}
      this.getList()
    },
    // 点击详情回调
    handleEventClick(row) {
      const id = row.event.id
      getLdjl(id).then(res => {
        this.open = true
        this.form = res.data
      })
    },
    handleEventDblClick(row, item) {
      console.log("双击")
    },
    // 新增回调
    handleDateSelect(row) {
      // 获取当前的月份
      const yue = row.start.getMonth() + 1
      this.open = true;
      this.ShowBtn = true
      this.title = "添加录单记录";
      this.$set(this.form, 'rq', row.startStr)
      this.$set(this.form, 'yf', yue)
      this.$set(this.form, 'createBy', this.$store.getters.name)
      this.$set(this.form, 'createTime', parseTime(new Date()))
    },
    handleEvents(row) {}
  }
};
</script>
